<template>
<div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>部门管理</el-breadcrumb-item>
    <el-breadcrumb-item>部门列表</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input placeholder="请输部门名称" clearable v-model="name" @clear="searchDepartment">
          <el-button slot="append" icon="el-icon-search" @click.prevent="searchDepartment"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click.prevent="showAddDepartmentDialog">添加部门</el-button>
      </el-col>
    </el-row>
    <el-table :data="departmentList" border stripe>
      <el-table-column label="#" type="index"></el-table-column>
      <el-table-column label="部门编号" prop="id"></el-table-column>
      <el-table-column label="部门名称" prop="deptName"></el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click.prevent="showEditDialog(scope.row)">修改</el-button>
          <el-button type="danger" size="mini" @click.prevent="removeDepartmentById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[3, 6 , 12, 24]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    ></el-pagination>
  </el-card>

  <div>
    <!----------------------------------添加菜单------------------------------------->
    <el-dialog title="增加部门" :visible.sync="addDepartmentFormVisible" :close-on-click-modal="false">
      <el-form ref="addDepartmentForm" :rules="addDepartmentRules" :model="addDepartment" label-width="150px" size="mini">
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="addDepartment.deptName"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.prevent="cancelAddDepartment">取 消</el-button>
        <el-button type="primary" @click.prevent="saveAddDepartment">确 定</el-button>
      </div>
    </el-dialog>

    <!-----------------------------------修改菜单----------------------------------->
    <el-dialog title="修改部门" :visible.sync="editDepartmentFormVisible" :close-on-click-modal="false">
      <el-form ref="editDepartmentForm" :rules="editDepartmentRules" :model="editDepartment" label-width="150px" size="mini">
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="editDepartment.deptName"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.prevent="cancelEditDepartment">取 消</el-button>
        <el-button type="primary" @click.prevent="saveEditDepartment">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</div>
</template>

<script>
export default {
  name: "Department",
  data(){
    return{
      pageNum:1,
      pageSize:3,
      total:0,
      departmentList:[],
      name:'',
      addDepartmentFormVisible:false,
      editDepartmentFormVisible:false,
      addDepartment:{
        deptName:'',
      },
      addDepartmentRules:{
        deptName:[
          {required:true,message:"名称不能为空",trigger:"blur"}
        ]
      },
      editDepartment:{
        id:0,
        deptName:'',
      },
      editDepartmentRules:{
        deptName:[
          {required:true,message:"名称不能为空",trigger:"blur"}
        ]
      },
    }
  },
  methods:{
    handleSizeChange(size){
      this.pageSize = size ;
      this.pageNum = 1;
      this.initDepartment();
    },
    handleCurrentChange(now){
      this.pageNum = now ;
      this.initDepartment();
    },
    searchDepartment(){
      this.initDepartment();
    },
    initDepartment() {
      let url = "/department/list";
      this.$axios.get(url,{
        params:{
          now:this.pageNum,
          size:this.pageSize,
          name:this.name
        }
      }).then(res=>{
        if(res.data.code == 200){
          this.departmentList = res.data.data.list ;
          this.pageSize = res.data.data.pageSize;
          this.pageNum = res.data.data.pageNum ;
          this.total = res.data.data.total ;
        }else {
          this.$message({
            type:'error',
            message:res.data.msg,
            duration:1000
          })
        }
      })
    },
    removeDepartmentById(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = "/department/del/"+id ;
        this.$axios.delete(url)
            .then(res=>{
              if (res.data.code == 200){
                this.$message({
                  type:"success",
                  message:res.data.msg,
                  duration:1000
                })
                this.initDepartment();
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    showAddDepartmentDialog(){
      this.addDepartmentFormVisible = true;
    },
    cancelAddDepartment(){
      this.addDepartmentFormVisible = false;
      this.$refs.addDepartmentForm.resetFields();
      this.initDepartment();
    },
    saveAddDepartment(){
      this.$refs.addDepartmentForm.validate(valid => {
        if (!valid) {
          return;
        }
        let url = "/department/add";
        this.$axios.post(url,this.addDepartment)
            .then(res=>{
              if (res.data.code == 200){
                this.$message({
                  type:"success",
                  message:res.data.msg,
                  duration:1000
                })
                this.addDepartmentFormVisible = false;
                this.initDepartment();
                this.$refs.addDepartmentForm.resetFields();
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            })
      })
    },
    showEditDialog(row){
      this.editDepartmentFormVisible = true;
      this.editDepartment = row;
    },
    cancelEditDepartment(){
      this.editDepartmentFormVisible = false;
      this.initDepartment();
      // this.$refs.editDepartmentForm.resetFields();
    },
    saveEditDepartment(){
      this.$refs.editDepartmentForm.validate(valid => {
        if (!valid) {
          return;
        }
        let url = "/department/modify";
        this.$axios.put(url,this.editDepartment)
            .then(res=>{
              if (res.data.code == 200){
                this.$message({
                  type:"success",
                  message:res.data.msg,
                  duration:1000
                })
                this.editDepartmentFormVisible = false;
                this.initDepartment();
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            })
      })
    },
    },
  created() {
    this.initDepartment();
  }
}
</script>

<style scoped>

</style>